<!--
 * @Author:
 * @Date: 2023-09-19 15:45:03
 * @LastEditors:
 * @LastEditTime: 2023-09-25 21:05:16
 * @FilePath: \immoka-admin\src\views\dailyFirstRecharge\hintSetting.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center justify-between">
      <div>
        <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
        <el-button type="danger" @click="handleEditAll">批量编辑</el-button>
      </div>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column :index="indexMethod" label="序号" type="index" width="120px"></el-table-column>
      <el-table-column label="提示名称" prop="title"/>
      <el-table-column label="提示内容" prop="content"></el-table-column>
      <el-table-column label="跳转地址" prop="url"></el-table-column>
      <el-table-column label="添加时间" prop="created_at"></el-table-column>
      <el-table-column label="宝箱等级" prop="level">
        <template slot-scope="{row}">
          {{ row.level === 1 ? '初级' :row.level === 2 ? '中级' : '高级' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{row}">
          <el-tag v-if="row.status === 0" type="warning" size="normal"  effect="dark">禁用 </el-tag>
          <el-tag v-else type="success" size="normal"  effect="dark">启用 </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          <el-button v-if="row.status === 0" type="warning" @click="handleStatus(row)">启用</el-button>
          <el-button v-if="row.status === 1" type="warning" @click="handleStatus(row)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="initData"
    />

    <el-dialog
      :title="isEdit?'编辑':'新增'"
      :visible.sync="addDialog2"
      lock-scroll
      width="30%"
      @close="closeAddDialog2"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        <el-form-item label="提示名称" prop="title">
          <el-input type="text" v-model="form.title" placeholder="请输入提示名称" :maxlength="8" :minlength="4" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="提示内容" prop="content">
          <el-input type="text" v-model="form.content" placeholder="请输入提示内容" :maxlength="20" :minlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="跳转地址" prop="url">
          <el-input type="textarea" rows="3" v-model="form.url" placeholder="请输入跳转地址" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="关联状态节点" prop="level">
          <el-select v-model="form.level" placeholder="请选择" clearable filterable>
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="提示状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>

        </el-form-item>
      </el-form>

      <section slot="footer">
        <el-button @click="addDialog2 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </section>
    </el-dialog>

    <el-dialog
      :visible.sync="editAllDialogVisible"
      title="批量编辑"
      width="435px"
    >
      <p class="mb-4">提示：您已选择 {{ this.titleList.toString() }} 等......多条数据</p>
      <div class="flex items-start" style="text-wrap: nowrap;">
        <p><span style="color: red">*</span>跳转地址：</p>
        <el-input type="textarea" rows="3" v-model="editAllCount" placeholder="请输入跳转地址" resize="none"></el-input>
      </div>
      <div class="flex items-center justify-start" style="text-wrap: nowrap;">
        <p><span style="color: red">*</span>提示状态：</p>
        <el-radio-group v-model="editAllStatus">
          <el-radio :label="0">禁用</el-radio>
          <el-radio :label="1">启用</el-radio>
        </el-radio-group>
      </div>


      <span slot="footer" class="dialog-footer">
            <el-button @click="editAllDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmEditAll">确 定</el-button>
        </span>
    </el-dialog>
  </el-card>


</template>

<script>
import {
  rechargeNoticeList,
  rechargeNoticeAdd,
  rechargeNoticeEdit,
  rechargeNoticeBatch,
  rechargeNoticeStatus,
  rechargeNoticeDel,
} from '@/api/dailyFirstRecharge'

export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: '已获得初级宝箱'
        },
        {
          value: 2,
          label: '已获得中级宝箱'
        },
        {
          value:3,
          label: '已获得高级宝箱'
        }
      ],
      selectData: '',
      menuList: [],
      tableList: [],
      user_code: '',
      nickname: '',
      dateList: undefined,
      listQuery: {
        type: 1,
        page: 1,
        perPage: 10
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 0,
      /* 弹出框开关 */
      addDialog: false,
      addDialog2: false,

      rejectLoading: false,
      passLoading: false,
      id: '',
      // 拒绝原因
      reject_reason: '',
      form: {
        id: undefined,
        title: undefined,
        content: undefined,
        url: undefined,
        level: undefined,
        status: 1,
        confirm: undefined,
      },
      rules: {
        title: [
          { required: true, message: '请输入提示名称', trigger: 'blur' },
          { min: 4,message: '最少输入四个字符', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入提示内容', trigger: 'blur' },
          { min: 10,message: '最少输入十个字符', trigger: 'blur' },
        ],
        url: [{ required: true, message: '请输入跳转地址', trigger: 'blur' }],
        level: [{ required: true, message: '请选择关联状态节点', trigger: 'blur' }],
      },
      multipleSelection: [],
      dataIds: '',
      editAllCount: '',
      editAllStatus: 1,
      editAllDialogVisible: false,
      isEdit: false,
      titleList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    indexMethod(index) {
      return this.total - (this.listQuery.page - 1) * this.listQuery.perPage - index
    },
    confirmEditAll() {
      if (!this.editAllCount) {
        this.$message({
          message: '请输入跳转地址',
          type: 'warning'
        })
        return false
      }

      rechargeNoticeBatch({
        ids: this.dataIds.toString(),
        url: this.editAllCount,
        status: this.editAllStatus,
        confirm: 1
      }).then(res => {
        if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            }
            this.editAllDialogVisible = false
            this.initData()
      })
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击批量删除
    handleEditAll() {
      if (this.multipleSelection.length < 2) {
        this.$message({
          message: '请选择2条或2条以上的内容',
          type: 'warning'
        })
        return
      } else {

        let ids = []
        this.titleList = []
        for (let key in this.multipleSelection) {
          if(key < 3) {
            this.titleList.push(this.multipleSelection[key].title)
          }
          // ids += `${this.multipleSelection[key].id},`
          ids.push(this.multipleSelection[key].id)
        }
        // ids = ids.substring(0, ids.length - 1)
        this.dataIds = ids
      }
      this.editAllDialogVisible = true
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.isEdit = true
      this.addDialog2 = true
    },
    handleAdd() {
      this.isEdit = false
      this.addDialog2 = true
    },
    handleSearch() {
      this.listQuery.page = 1
      this.initData()
    },
    async initData() {
      try {
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        const { data } = await rechargeNoticeList(this.listQuery)
        this.total = data.meta.total
        this.tableList = data.list

      } catch (e) {
        console.error(e)
      }
    },

    handleDelete(row) {
      this.$confirm('此操作不可恢复，是否继续删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const { code, data } = await rechargeNoticeDel({
          id: row.id
        })
        if (code === 200) {

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initData()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleStatus(row) {
      if(row.status === 0) {

        this.$confirm('如启用该条数据另一条数据将自动设为禁用，是否确认启用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { code, data } = await rechargeNoticeStatus({
            id: row.id,
            status: 1,
            confirm: 1
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.initData()
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }else {
        this.$confirm('状态修改为禁用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { code, data } = await rechargeNoticeStatus({
            id: row.id,
            status: 0,
            confirm: 1
          })
          if (code === 200) {

            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.initData()
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    async handleChecked() {
      if (!this.user_code.trim()) {
        return void this.$message.warning('请输入！')
      }
      let data = {
        id: this.user_code,
        page: 1
      }
      giftList(data).then(res => {
        if (res.data) {
          this.addDialog = false
          this.addDialog2 = true
          this.form.gift_id = res.data.data[0].id
          this.form.name = res.data.data[0].name
          this.form.price = res.data.data[0].price
        }
      }).finally(() => this.rejectLoading = false)
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {

          this.form.confirm = 1
          if (this.form.id) {
            rechargeNoticeEdit(this.form).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.addDialog2 = false
                this.initData()
              }
            })

          } else {
            rechargeNoticeAdd(this.form).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.addDialog2 = false
                this.initData()
              }
            })
          }

        }
      })
    },
    closeAddDialog() {
      this.user_code = undefined
    },
    closeAddDialog2() {
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate() // 清除整个表单的校验
        this.$refs['form'].resetFields() // 清除整个表单的校验
      }
      this.form = {
        id: undefined,
        title: undefined,
        content: undefined,
        url: undefined,
        level: undefined,
        status: 1,
        confirm: undefined,
      }
    }
  }
}
</script>

<style scoped>
.imageStyle {
  width: 150px;
}

.input {
  width: 200px;
}
</style>
